<template>
	<view class="search-detail-page">
		<view class="top-fixed-project-list">
			<Topsearch :searchKeyWord="searchKeyWord" :currentCateIndex="cateIndex" @currentCateClick='changeCateIndex'
			 @searchEvent="searchDetail" @searchClear='searchClear' />
		</view>
		<view style="height: 180rpx;">
		</view>
		<view v-if="cateIndex===0" class="search-result">
			<ProjectItem :projectList="searchProjectList" ref='Item'></ProjectItem>
			<view class="sysBottomShow" v-if="isShowBottom&&searchProjectList.length>2" style="background: #f5f6f9;">
				已加载今日全部推荐
			</view>
		</view>

		<view v-if="cateIndex===1" class="search-result">
			<ExpertItem :expertList="expertSearchList" ref='Item'></ExpertItem>
			<view class="sysBottomShow" v-if="isShowBottom&&expertSearchList.length>2" style="background: #f5f6f9;">
				已加载今日全部推荐
			</view>
		</view>

		<view v-if="cateIndex===2" class="search-result">
			<ActivityItem :activityList="actSearchList" ref='Item'></ActivityItem>
			<view class="sysBottomShow" v-if="isShowBottom&&actSearchList.length>3" style="background: #f5f6f9;">
				已加载今日全部推荐
			</view>
		</view>
		<view v-if="isEmptyData" class="search-result">
			<view class="sysNodata">
				<image src="../../static/nomorepro.png" mode=""></image>
				<view class="sysNodataTitle">
					暂无相关数据
				</view>
			</view>
			<view class="recomm-contain">
				<view class="sysForYou">
					<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/pro_for_you.png" mode="heightFix"></image>
				</view>
				<view class="recommend-search-contain" v-if="cateIndex===0">
					<ProjectItem :projectList="searchRecommendProjectList" ref='Item'></ProjectItem>

				</view>
				<view class="recommend-search-contain" v-if="cateIndex===1">
					<ExpertItem :expertList="searchRecommendExpertList" ref='Item'></ExpertItem>

				</view>
				<view class="recommend-search-contain" v-if="cateIndex===2">
					<ActivityItem :activityList="searchRecommendActList" ref='Item'></ActivityItem>
				</view>
				<view class="sysBottomShow" style="background: #f5f6f9;">
					已加载今日全部推荐
				</view>
			</view>
		</view>
		<!-- <view class="example-body">
			<uni-drawer ref="drawerRef" :width="drawWidth" :visible="showRight" mode="right" @change="drawChange" @close="closeDrawer('right')">
				<view class="pro-want">
					<view class="pro-want-contain-title">
						项目诉求
					</view>
					<view class="pro-want-contain">
						<block v-for="(item,index) in wantType" :key="index">
							<view @click="clickWant" :data-want="item" :class="[drawWant[0]==item?'pro-want-item-active':'pro-want-item']">
								{{item}}
							</view>
						</block>
					</view>
				</view>
				<view class="pro-want">
					<view class="pro-want-contain-title">
						当前阶段
					</view>
					<view class="pro-want-contain">
						<block v-for="(item,index) in processType" :key="index">
							<view @click="clickProcess" :data-process="item" :class="[drawProcess.length>0&&drawProcess[0].code==item.code?'pro-want-item-active':'pro-want-item']">
								{{item.value}}
							</view>
						</block>
					</view>
				</view>
				<view class="pro-want">
					<view class="pro-want-contain-title">
						融资阶段
					</view>
					<view class="pro-want-contain">
						<block v-for="(item,index) in financialType" :key="index">
							<view @click="clickFina" :data-fina="item" :class="[drawFina.length>0&&drawFina[0].code==item.code?'pro-want-item-active':'pro-want-item']">
								{{item.value}}
							</view>
						</block>
					</view>
				</view>
				<view class="draw-option">
					<view @click="resetDraw" class="draw-option-reset">
						重置
					</view>
					<view @click="drawConfirm" class="draw-option-close">
						确定
					</view>
				</view>
			</uni-drawer>
		</view> -->
		<view class="totop" @click="top" :style="{'display':(flag===true? 'block':'none')}">
			<uni-icons type="arrowthinup" size="24" color="#444444" style="font-weight: bold;"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Topsearch from '@/components/top-search-tab.vue'
	import ProjectItem from '@/components/page-componnet/project-item.vue'
	import LiFilter from '@/components/Li-Filter/Li-Filter.vue'
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
	import ExpertItem from '@/components/page-componnet/expert-item.vue'
	import ActivityItem from '@/components/page-componnet/activity-item.vue'
	import searchCondition from '@/utils/search_condition.js';

	export default {
		data() {
			return {
				cateIndex: 0,
				searchProjectList: [],
				pageProjectSize: 10,
				pageProjectNum: 1,
				searchKeyWord: '',
				height: 0.6,
				datalist: {
					filterType: 1,
					data: []
				},
				projectType: [],
				showRight: false,
				drawWidth: uni.upx2px(575),
				financialType: [],
				processType: [],
				wantType: ['全部', '项目融资', '项目落地', '技术交易', '招人才', '其他'],
				drawWant: [],
				copyDrawWant: [],
				drawProcess: [],
				copyDrawProcess: [],
				drawFina: [],
				copyDrawFina: [],
				isDrawConfirmFlag: false,
				isShowBottom: false,
				searchRecommendProjectList: [],
				searchRecommendExpertList: [],
				searchRecommendActList: [],
				techFiled: [],
				provinceId: '',
				cityId: '',
				sort: null,
				pageSize: 10,
				expertPageNum: 1,
				actPageNum: 1,
				expertSearchList: [],
				actSearchList: [],
				flag:false
			}
		},
		components: {
			Topsearch,
			ProjectItem,
			LiFilter,
			uniDrawer,
			ExpertItem,
			ActivityItem
		},
		computed: {
			...mapState('userStore', ['historySearch']),
			isEmptyData() {
				if (this.cateIndex === 0) {
					return this.searchProjectList.length === 0&&this.isShowBottom;
				} else if (this.cateIndex === 1) {
					return this.expertSearchList.length === 0&&this.isShowBottom;
				} else {
					return this.actSearchList.length === 0&&this.isShowBottom;
				}
			}
		},
		watch: {
			cateIndex: function(val) {
				this.refreshList();
			}
		},
		methods: {
			...mapMutations('userStore', ['saveHistorySearch']),
			searchClear(v) {
				uni.navigateBack({
					delta: 1
				})
			},
			searchAct() {
				uni.showLoading({
					title: '加载中'
				});
				const formData = searchCondition.composeCondition(this.searchKeyWord, 'activity');
				this.$request.get({
					url: 'innovationActivities/showByPage',
					data: {
						pageSize: this.pageSize,
						pageNum: this.actPageNum,
						...formData
					},
				}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					let array = res.list;
					// if (this.expertPageNum === 1) {
					// 	this.actSearchList = [];
					// }
					// for (let i = 0; i < array.length; i++) {
					// 	this.actSearchList.push(array[i])
					// }
					this.actSearchList = [...this.actSearchList,...array]
					this.isShowBottom = res.isLastPage;
					if (this.expertPageNum === 1 && res.isLastPage) {
						this.getactRecommendList()
					}

					uni.stopPullDownRefresh();
				});
			},
			searchExpert() {
				uni.showLoading({
					title: '加载中'
				});
				const formData = searchCondition.composeCondition(this.searchKeyWord, 'expert');
				this.$request.post({
					url: 'ExpertInfo/selectExperInfoByCondition',
					data: {
						pageSize: this.pageSize,
						pageNumber: this.expertPageNum,
						...formData
					},
				}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					for (let k of res.list) {
						k.research = k.research.split(',')

						let priceItems = k.mallInfo;
						if (priceItems && priceItems.length !== 0) {
							//获取到 图文咨询
							const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
							if (picTxtItems.length !== 0) {
								if (parseFloat(picTxtItems[0].isEnable) === 1) {
									k.picTxtItem = picTxtItems[0];
								}
							}
							const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
							if (phoneItems.length !== 0) {
								if (parseFloat(phoneItems[0].isEnable) === 1) {
									k.phoneItem = phoneItems[0];
								}
							}
						}
					}
					let array = res.list;
					if (this.expertPageNum === 1) {
						this.expertSearchList = [];
					}
					for (let i = 0; i < array.length; i++) {
						this.expertSearchList.push(array[i])
					}
					if (this.pageSize * this.expertPageNum >= res.total) {
						this.isShowBottom = true;
					}
					if (this.expertPageNum === 1 && this.expertSearchList.length === 0) {
						this.getexpertRecommendList()
					}

					uni.stopPullDownRefresh();
				});
			},
			getactRecommendList() {
				this.$request.get({
					url: 'innovationActivities/showByPage',
					data: {
						pageSize: 10,
						pageNumber: 1,
					},
				}).then(res => {
					let array = res.list;
					this.searchRecommendActList = array.length > 5 ? array.slice(0, 5) : array;
				});
			},
			getexpertRecommendList() {
				this.$request.post({
					url: 'ExpertInfo/selectExperInfoByCondition',
					data: {
						pageSize: 5,
						pageNumber: 1,
					},
				}).then(res => {
					for (let k of res.list) {
						k.research = k.research.split(',')

						let priceItems = k.mallInfo;
						if (priceItems && priceItems.length !== 0) {
							//获取到 图文咨询
							const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
							if (picTxtItems.length !== 0) {
								if (parseFloat(picTxtItems[0].isEnable) === 1) {
									k.picTxtItem = picTxtItems[0];
								}
							}
							const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
							if (phoneItems.length !== 0) {
								if (parseFloat(phoneItems[0].isEnable) === 1) {
									k.phoneItem = phoneItems[0];
								}
							}
						}
					}
					let array = res.list;
					this.searchRecommendExpertList = array.length > 5 ? array.slice(0, 5) : array;
				});
			},
			//获取优选推荐的数据
			getRecommendList() {
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: 5,
						pageIndex: 1,
					},
				}).then(res => {
					let array = res.data;
					this.searchRecommendProjectList = array.length > 5 ? array.slice(0, 5) : array;
				});
			},
			searchDetail(data) {
				this.searchKeyWord = data.keyWord;
				this.pageProjectNum = 1;
				this.isShowBottom = false;
				this.refreshList();
			},
			refreshList() {
				this.pageProjectNum = 1;
				this.isShowBottom = false;
				this.expertPageNum = 1,
				this.actPageNum = 1,
				this.expertSearchList = [],
				this.searchProjectList = [],
				this.actSearchList = []
				let val = this.cateIndex;
				if (val === 0) {
					this.searchProject();
				} else if (val === 1) {
					this.searchExpert();
				} else if (val === 2) {
					this.searchAct();
				}
			},
			changeCateIndex(cateIndex) {
				this.cateIndex = cateIndex;
			},
			change(e) {
				// if(e.data.optionType==1){
				// 	this.getCity(e.data.regionId,e.clickIndex);
				// }
			},
			select(e) {
				let nodes = e.nodes;
				if (e.root.value === 'b') {
					if (nodes.length > 0 && nodes[0].text === "全部") {
						this.techFiled = []
					} else if (nodes.length > 1 && nodes[1].text === "全部") {
						this.techFiled = [nodes[0].value]
					} else if (nodes.length > 1 && nodes[1].text !== "全部") {
						this.techFiled = [nodes[1].value]
					}
				}
				if (e.root.value === 'c') {
					if (nodes.length > 0 && nodes[0].text === "全国") {
						this.provinceId = '';
						this.cityId = '';
					} else {
						this.provinceId = e.nodes[0].value;
						this.cityId = e.nodes[1].value;
					}
				}
				if (e.root.value === 'a') {
					if (e.data.text == '综合') {
						this.sort = null
					}
					if (e.data.text == '最新') {
						this.sort = "desc";
					}
				}
				this.searchProject();

				// this.techFiled = e.nodes;
			},
			top() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
					this.flag = true
				} else { //当距离小于600时显示回到顶部按钮
					this.flag = false
				}
			},
			//查询项目技术
			searchProject() {
				uni.showLoading({
					title: '加载中'
				});
				const formData = searchCondition.composeCondition(this.searchKeyWord, 'project');
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						pageSize: this.pageProjectSize,
						pageIndex: this.pageProjectNum,
						...formData,
						sort: this.sort
					},
				}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					let array = res.data;
					if (this.pageProjectNum === 1) {
						this.searchProjectList = [];
					}
					for (let i = 0; i < array.length; i++) {
						this.searchProjectList.push(array[i])
					}
					if (this.pageProjectSize * this.pageProjectNum >= res.count) {
						this.isShowBottom = true;
					}else{
						this.isShowBottom = false;
					}
					if (this.pageProjectNum === 1 && this.searchProjectList.length === 0) {
						this.getRecommendList()
					}
					uni.stopPullDownRefresh();
				});

			},
		},
		onNavigationBarButtonTap(e) {
			this.showRight = !this.showRight
		},
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.hide()
				return true
			}
		},
		onPullDownRefresh: function() {
			
			this.refreshList()
		},
		onReachBottom() {
			if (this.isShowBottom) {} else {
				let val = this.cateIndex;
				if (val === 0) {
					this.pageProjectNum++;
					this.searchProject();
				} else if (val === 1) {
					this.expertPageNum++;
					this.searchExpert();
				} else if (val === 2) {
					this.actPageNum++;
					this.searchAct();
				}
			}
		},
		onLoad(option) {
			// this.drawWidth = uni.upx2px(575);
			if (JSON.stringify(option) === "{}") {} else {
				const param = JSON.parse(decodeURIComponent(option.param));
				this.searchKeyWord = param.keyWord;
				this.cateIndex = param.cateIndex;
				if (this.cateIndex === 0) {
					this.searchProject();
					searchCondition.loadProject();
				} else if (this.cateIndex === 1) {
					this.searchExpert();
					searchCondition.loadExpert();
				} else {
					searchCondition.loadAct();
				}
			}
		},
		onHide() {
			this.$refs.Item.resetOpcity()
		}
	}
</script>

<style>
	page {
		min-height: 100vh;
	}

	.search-detail-page {
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
	}

	.top-fixed-project-list {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.search-cate-text {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(121, 121, 121, 1);
		/* margin-right: 46upx; */
		position: absolute;
		top: 0;
		right: 30upx;
		z-index: 4
	}

	.self-search-cate-text {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-right: 38upx;
		color: rgba(121, 121, 121, 1);
	}

	.self-search-cate-text>.icon {
		margin-left: 7upx;
		vertical-align: middle;
	}

	.last-item {
		margin-right: 0upx;
	}

	.search-cate-text>.icon {
		margin-left: 7upx;
		vertical-align: middle;
	}

	.self-search-contain .self-filter-contain {
		display: flex;
		justify-content: space-between;
		padding: 0upx 30upx;
		position: relative;
		/* border: 1px solid #007AFF; */
	}

	.re-filter-contain {
		/* display: flex;
		justify-content: space-between; */
		position: relative;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #F2F2F2;
		background-color: #FFFFFF;
		/* padding: 0upx 30upx; */
	}

	.re-search-cate-text {}

	/* .re-filter-contain-left{
		width: 471upx;
	} */
	.self-search-contain .filter-contain-left {
		display: flex;
	}

	.self-filter-contain-left {
		display: flex;
	}

	.search-result {
		/* margin-top: 24upx; */
		/* border-top: 1upx solid #F2F2F2; */
		background-color: #fff;
	}

	.pro-want-item {
		background: rgba(245, 245, 245, 1);
		border-radius: 10upx;
		padding: 14upx 27upx;
		font-size: 26upx;
		margin-right: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(74, 74, 74, 1);
		margin-bottom: 24upx;
	}

	.pro-want-item-active {
		background: rgba(243, 247, 255, 1);
		border-radius: 10upx;
		border: 1px solid rgba(42, 125, 250, 1);
		padding: 14upx 27upx;
		font-size: 26upx;
		margin-right: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2A7DFA;
		margin-bottom: 24upx;
	}

	.pro-want {
		margin: 62upx 23upx 0upx 23upx;
	}

	.pro-want-contain {
		display: flex;
		/* justify-content: space-between; */
		flex-wrap: wrap;

	}

	.pro-want-contain-title {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(74, 74, 74, 1);
		margin-bottom: 21upx;
	}

	.draw-option {
		width: 100%;
		display: flex;
		height: 87upx;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.draw-option-reset {
		width: 50%;
		font-size: 30upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(133, 133, 133, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1upx solid #E0E0E0;
	}

	.draw-option-close {
		width: 50%;
		background: rgba(42, 125, 250, 1);
		font-size: 30upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		/* border-top: 1upx solid #E0E0E0; */
	}

	.no-more-project {
		width: 100%;
	}

	.recomm-contain-top {
		display: flex;
		align-items: center;
		padding: 0 30upx;
	}

	.recomm-contain-top-line {
		height: 1upx;
		width: 239upx;
		border: 1upx solid #EBEBEB;
	}

	.recomm-contain-top-text-search {
		margin: 0 43upx;
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(51, 51, 51, 1);
	}
	.totop {
		width: 88upx;
		height: 88upx;
		box-shadow: 0px 4upx 8upx 0upx rgba(0, 0, 0, 0.04);
		border: 2upx solid rgba(235, 235, 235, 1);
		position: fixed;
		right: 20upx;
		bottom: 56upx;
		background-color: #FFFFFF;
		border-radius: 50%;
		line-height: 88upx;
		text-align: center;
	}
</style>
